<template>
  <BaseFormField
    v-slot="{ fieldId }"
    :resource-name="resourceName"
    :field="field"
    :value="modelValue"
    :is-floating="isFloating"
  >
    <FormFieldGroup
      :field="field"
      :field-id="fieldId"
      :validation-errors="validationErrors"
      as-paragraph-label
    >
      <IFormLabel
        :for="fieldId"
        class="mb-1 block sm:hidden"
        :label="$t('activities::activity.type.type')"
      />

      <IIconPicker
        :model-value="modelValue"
        :icons="typesForIconPicker"
        value-field="id"
        class="flex-nowrap overflow-auto sm:flex-wrap sm:overflow-visible"
        v-bind="field.attributes"
        @update:model-value="updateModelValue"
      />
    </FormFieldGroup>
  </BaseFormField>
</template>

<script setup>
import isNil from 'lodash/isNil'

import FormFieldGroup from '@/Core/fields/FormFieldGroup.vue'

import { useActivityTypes } from '../../composables/useActivityTypes'

const props = defineProps({
  field: { type: Object, required: true },
  modelValue: {},
  resourceName: String,
  resourceId: [String, Number],
  validationErrors: Object,
  isFloating: Boolean,
})

const emit = defineEmits(['update:modelValue', 'set:initialValue'])

const { typesForIconPicker } = useActivityTypes()

function updateModelValue(value) {
  emit('update:modelValue', value)
}

function setInitialValue() {
  emit(
    'set:initialValue',
    !isNil(props.field.value)
      ? typeof props.field.value == 'object'
        ? props.field.value.id
        : props.field.value
      : null
  )
}

setInitialValue()
</script>
